What is @typescript-eslint/typescript-estree?
The @typescript-eslint/typescript-estree package is a parser that converts TypeScript source code into an ESTree-compatible form. It is primarily used in the context of ESLint to enable linting of TypeScript code by converting TypeScript syntax into a format that ESLint can understand and work with.
What are @typescript-eslint/typescript-estree's main functionalities?
Parsing TypeScript code to ESTree
This feature allows you to parse TypeScript code and get an Abstract Syntax Tree (AST) that is compatible with ESTree. This is useful for tools that need to analyze or manipulate the syntax of TypeScript code.
const tsEStree = require('@typescript-eslint/typescript-estree');
const code = 'let x: number = 1;';
const ast = tsEStree.parse(code, { jsx: false });
console.log(ast);
Parsing TypeScript code with JSX
This feature is similar to the previous one but includes support for JSX syntax, which is commonly used in React applications. It allows the parser to correctly interpret JSX elements within TypeScript code.
const tsEStree = require('@typescript-eslint/typescript-estree');
const code = '<div>Hello, TypeScript!</div>';
const ast = tsEStree.parse(code, { jsx: true });
console.log(ast);
Parsing a file
This feature allows you to parse the contents of a TypeScript file by reading the file and then parsing the code. It is useful when you want to analyze or lint a file directly.
const tsEStree = require('@typescript-eslint/typescript-estree');
const fs = require('fs');
const filePath = './example.ts';
const code = fs.readFileSync(filePath, 'utf8');
const ast = tsEStree.parse(code, { filePath });
console.log(ast);
Other packages similar to @typescript-eslint/typescript-estree
typescript-eslint-parser
This package was the predecessor to @typescript-eslint/typescript-estree and has been deprecated in favor of the newer package. It provided similar functionality in terms of parsing TypeScript code for ESLint.
babel-eslint
babel-eslint is a parser that allows ESLint to run on source code that is transpiled with Babel. While it is not TypeScript-specific, it can be used with Babel's TypeScript preset to parse TypeScript code.
espree
Espree is the default parser for ESLint and is built on top of Acorn. It is designed to parse ECMAScript (JavaScript) code. While it does not natively support TypeScript, it serves a similar purpose for JavaScript code as @typescript-eslint/typescript-estree does for TypeScript.
TypeScript ESTree
A parser that converts TypeScript source code into an ESTree-compatible form
About
This parser is somewhat generic and robust, and could be used to power any use-case which requires taking TypeScript source code and producing an ESTree-compatible AST.
In fact, it is already used within these hyper-popular open-source projects to power their TypeScript support:
- ESLint, the pluggable linting utility for JavaScript and JSX
- Prettier, an opinionated code formatter
Installation
yarn add -D @typescript-eslint/typescript-estree
API
Parsing
parse(code, options)
Parses the given string of code with the options provided and returns an ESTree-compatible AST.
interface ParseOptions {
comment?: boolean;
debugLevel?: boolean | ('typescript-eslint' | 'eslint' | 'typescript')[];
errorOnUnknownASTType?: boolean;
filePath?: string;
jsx?: boolean;
loc?: boolean;
loggerFn?: Function | false;
range?: boolean;
tokens?: boolean;
useJSXTextNode?: boolean;
}
const PARSE_DEFAULT_OPTIONS: ParseOptions = {
comment: false,
errorOnUnknownASTType: false,
filePath: 'estree.ts',
jsx: false,
loc: false,
loggerFn: undefined,
range: false,
tokens: false,
useJSXTextNode: false,
};
declare function parse(
code: string,
options: ParseOptions = PARSE_DEFAULT_OPTIONS,
): TSESTree.Program;
Example usage:
import { parse } from '@typescript-eslint/typescript-estree';
const code = `const hello: string = 'world';`;
const ast = parse(code, {
loc: true,
range: true,
});
parseAndGenerateServices(code, options)
Parses the given string of code with the options provided and returns an ESTree-compatible AST. Accepts additional options which can be used to generate type information along with the AST.
interface ParseAndGenerateServicesOptions extends ParseOptions {
errorOnTypeScriptSyntacticAndSemanticIssues?: boolean;
extraFileExtensions?: string[];
filePath?: string;
preserveNodeMaps?: boolean;
project?: string | string[];
projectFolderIgnoreList?: (string | RegExp)[];
tsconfigRootDir?: string;
createDefaultProgram?: boolean;
}
const PARSE_AND_GENERATE_SERVICES_DEFAULT_OPTIONS: ParseOptions = {
...PARSE_DEFAULT_OPTIONS,
errorOnTypeScriptSyntacticAndSemanticIssues: false,
extraFileExtensions: [],
preserveNodeMaps: false,
project: undefined,
projectFolderIgnoreList: ['/node_modules/'],
tsconfigRootDir: process.cwd(),
};
declare function parseAndGenerateServices(
code: string,
options: ParseOptions = PARSE_DEFAULT_OPTIONS,
): TSESTree.Program;
Example usage:
import { parseAndGenerateServices } from '@typescript-eslint/typescript-estree';
const code = `const hello: string = 'world';`;
const ast = parseAndGenerateServices(code, {
filePath: '/some/path/to/file/foo.ts',
loc: true,
project: './tsconfig.json',
range: true,
});
TSESTree
, AST_NODE_TYPES
and AST_TOKEN_TYPES
Types for the AST produced by the parse functions.
TSESTree
is a namespace which contains object types representing all of the AST Nodes produced by the parser.AST_NODE_TYPES
is an enum which provides the values for every single AST node's type
property.AST_TOKEN_TYPES
is an enum which provides the values for every single AST token's type
property.
Supported TypeScript Version
We will always endeavor to support the latest stable version of TypeScript.
The version of TypeScript currently supported by this parser is ~3.2.1
. This is reflected in the devDependency
requirement within the package.json file, and it is what the tests will be run against. We have an open peerDependency
requirement in order to allow for experimentation on newer/beta versions of TypeScript.
If you use a non-supported version of TypeScript, the parser will log a warning to the console.
Please ensure that you are using a supported version before submitting any issues/bug reports.
Reporting Issues
Please check the current list of open and known issues and ensure the issue has not been reported before. When creating a new issue provide as much information about your environment as possible. This includes:
- TypeScript version
- The
typescript-estree
version
AST Alignment Tests
A couple of years after work on this parser began, the TypeScript Team at Microsoft began officially supporting TypeScript parsing via Babel.
I work closely with the TypeScript Team and we are gradually aligning the AST of this project with the one produced by Babel's parser. To that end, I have created a full test harness to compare the ASTs of the two projects which runs on every PR, please see the code for more details.
Build/Test Commands
npm test
- run all testsnpm run unit-tests
- run only unit testsnpm run ast-alignment-tests
- run only Babylon AST alignment tests
Debugging
If you encounter a bug with the parser that you want to investigate, you can turn on the debug logging via setting the environment variable: DEBUG=typescript-eslint:*
.
I.e. in this repo you can run: DEBUG=typescript-eslint:* yarn lint
.
License
TypeScript ESTree inherits from the the original TypeScript ESLint Parser license, as the majority of the work began there. It is licensed under a permissive BSD 2-clause license.
Contributing
See the contributing guide here